<template>
  <div>
    <el-card class="box-card">
      <el-button type="primary" icon="Plus" @click="addItem">新增</el-button>
      <vue-table style="margin-top: 20px;" :border="false" :tableHeade="tableHeade" :tableData="tableData" :operationList="operationList" @operation="operation" @confirmDelete="confirmDelete" :width="operationList.length * 50">
        <template v-slot:default="{ row, head }">
          <div v-if="head === 'logoUrl'">
            <!-- <el-image style="width: 100px; height: 100px" :src="row.logoUrl" fit="fill" /> -->
          </div>
        </template>
      </vue-table>
      <vue-page :pageInfo="pageInfo" @currentChange="currentChange" />
    </el-card>
    <el-dialog :title="title" v-model="dialogVisible" width="50%" :before-close="handleClose">
      <el-form ref="form" :disabled="disabled" :model="form" :inline="true" label-suffix=":" label-width="80px">
          <el-form-item label="字段一">
              <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="字段二">
              <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="字段三">
              <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="字段四">
              <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="字段五">
              <el-input v-model="form.name"></el-input>
          </el-form-item>
      </el-form>
      <template #footer>
          <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import {reactive, ref, onMounted} from 'vue'
import type { operationListType, tableDataType } from '@/components/Table/type'
import { reqHasTrademark } from '@/api/product/trademark/index'
let tableHeade = reactive([
  { prop: 'tmName', label: '字段一' },
  { prop: 'userNumber', label: '字段二' },
  { prop: 'userNumber', label: '字段三' },
  // { prop: 'logoUrl', label: '权限', custom: true},
  { prop: 'userNumber', label: '字段四' },
])
let operationList = reactive([
  { name: '查看', index: 1, isShow: true},
  { name: '编辑', index: 2, isShow: true},
  { name: '删除', index: 3, color: 'red', isShow: true},
])
let pageInfo = reactive({
  total: 0,
  page: 1,
  limit: 10
})
let tableData = ref<any>([])
let form = reactive({
  name: ''
});
let title = ref('新增');
let dialogVisible = ref(false);
let disabled = ref(false);
// 新增
const addItem = () => {
  title.value = '新增';
  disabled.value = false
  dialogVisible.value = true;
}
// 查看
const viewItem = (item: tableDataType) => {
  title.value = '查看';
  disabled.value = true
  dialogVisible.value = true;
}
// 编辑
const EditItem = (item: tableDataType) => {
  title.value = '编辑';
  disabled.value = false
  dialogVisible.value = true;
}
const handleClose = () => {
};
onMounted(() => {
  getHasTrademark()
})
const getHasTrademark = async () => {
//   let res = await reqHasTrademark(pageInfo.page, pageInfo.limit)
//   console.log(res)
  tableData.value = [{tmName: 'tmName1'}, {tmName: 'tmName2'}, {tmName: 'tmName3'}, {tmName: 'tmName4'}, {tmName: 'tmName5'}, {}, {}, {}, {}, {}]
  pageInfo.total = 10
}
const operation = (item: operationListType, obj: tableDataType) => {
  console.log(item, obj)
  if (item.name === '查看') {
    viewItem(obj);
  } else if (item.name === '编辑') {
    EditItem(obj);
  }
}
const currentChange = (e: number) => {
  console.log(e)
}
const confirmDelete = (e: tableDataType) => {
  console.log(e)
}

let show = ref(false)
const toggleFade = () => {
  let element = document.getElementById('myElement');
  element!.classList.toggle('active');
}
</script>
<style scoped lang="scss">
</style>
